<template>
  <RouterView />
  <FooterMain></FooterMain>
</template>

<script setup lang="ts">
import { nextTick, onMounted } from 'vue'
import { RouterView } from 'vue-router'
import FooterMain from '@/components/footer-main/index.vue'
import {toggleTheme} from '@/utils/index'
import backgroundImg from '@/assets/images/background.jpg'
const checkImageLoaded = (image:string) => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = image
    img.onload = () => {
      resolve(true)
    }
    img.onerror = () => {
      reject(false)
    }
  })
}

onMounted(async() => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
  const day = new Date().getDay()
  if(day === 6 || mediaQuery.matches) { // 黑色星期六 或者 系统浏览器设置的是黑色主题，进入系统默认便是黑色主题。可点击周几日历按钮主动切换。
    toggleTheme('Dark')
  }else {
    toggleTheme(`Light${day}`)
  }

  // await checkImageLoaded(backgroundImg)
  nextTick(() => {
    const loadingDom = document.getElementById('MhLoading')
    if(loadingDom) {
      loadingDom.style.display = 'none'
      loadingDom.remove()
    }
  })
})
</script>
